<template>
	<view class="app">
		<view class="top">
			<view class="wenzi"><text class="wenzi1">钱包余额（元）</text></view>
			<view class="xiangqing">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="4">
						<view class="demo-layout bg-purple">
							<view class="xq">
								可用余额
							</view>
							<view class="jt">
								{{walletList.balance}}
							</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-light">
							<view class="xq">
								冻结余额
							</view>
							<view class="jt">
								{{walletList.freeze ==0?walletList.freeze +".00" :walletList.freeze}}
							</view>
						</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bg-purple-dark">
							<view class="xq">
								累计消费
							</view>
							<view class="jt">
								{{walletList.totleConsumed ==0?walletList.totleConsumed +".00" :walletList.totleConsumed}}
							</view>
						</view>
					</u-col>
				</u-row>
			</view>

		</view>
		<u-cell-group>
			<u-cell icon="rmb-circle" title="资金记录" value=">"></u-cell>
		</u-cell-group>
	</view>
</template>

<script>
	import {
		_wallet
	} from "../../api/wallet.js"

	export default {
		data() {
			return {
				walletList: []
			}
		},
		methods: {
			getwalletList() {
				_wallet().then(res => {
					console.log(res)
					if (res.code === 0) {
						this.walletList = res.data
					}
				})
			}
		},
		onReady(){
			if(!uni.getStorageSync("token")){
				uni.redirectTo({
					url:"../login/login"
				})
			}else{
				this.getwalletList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		width: 720rpx;
		height: 300rpx;
		background-color: orange;
		margin-left: 15rpx;

		.wenzi {
			height: 80rpx;
			// background-color: pink;

			.wenzi1 {
				font-size: 36rpx;
				font-weight: 700;
				line-height: 80rpx;
				margin-left: 30rpx;
			}
		}

		.xiangqing {
			height: 200rpx;
			padding-top: 30rpx;

			// background-color: white;
			.xq {
				margin-left: 50rpx;
			}

			.jt {
				margin-left: 50rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>
